import { Button } from 'antd-mobile'
import { HistogramOutline, CollectMoneyOutline, EnvironmentOutline } from 'antd-mobile-icons'
import type { IlistItem } from '../interface/IlistItem'

function showState(stateNum: number) {
  switch (stateNum) {
    case 1: return '审批中  '
    case 2: return '待接待  '
    case 3: return '接待中  '
    case 4: return '对账中  '
    case 5: return '待评价  '
    case 6: return '已完成  '
    case 7: return '已取消  '
    default: return '审批拒绝'
  }
}

function showTHeCity(cityNUm: number) {
  switch (cityNUm) {
    case 1: return '北京'
    case 2: return '天津'
    case 3: return '重庆'
    case 4: return '四川'
    case 5: return '武汉'
    default: return '南京'
  }
}

function ListItem(props: IlistItem) {
  const { billNo, companyName, dateFrom, dateTo, location, status } = props
  return (
    <>
      <div style={{ height: '1.6rem', width: '100%', padding: '.15rem .2rem', lineHeight: '.25rem' }}>
        {/* // 申请时间 */}
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>申请时间--</span>
          <span style={status < 2 ? { color: 'orange' } : (status < 7 ? { color: 'green' } : { color: 'red' })}>{showState(status)}</span>
        </div>
        {/* // 申请公司 */}
        <div style={{ fontWeight: '600' }}><HistogramOutline /><span style={{ marginLeft: '.05rem' }}>{companyName}</span></div>
        {/* // 时间始末 */}
        <div><CollectMoneyOutline /><span style={{ marginLeft: '.05rem' }}>{dateFrom}</span>--<span>{dateTo}</span></div>
        {/* // 地点 */}
        <div style={{ marginBottom: '.1rem' }}> <EnvironmentOutline /><span style={{ marginLeft: '.05rem' }}>{showTHeCity(location[0])}、{showTHeCity(location[1])}等{location.length}个地点</span></div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>申请单号 ：{billNo}</span>
          <Button style={{ borderRadius: '.13rem', border: '1px solid rgba(0,0,0,.3)' }} size='mini' type='button' onClick={() => {
            console.log('行程单')
          }}>行程单</Button>
        </div>
      </div>
    </>
  )
}
export default ListItem